<!-- 
  2022年9月29日15:53:34
  贺俊浩
 -->
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
     * {
       margin: 0;
       padding: 0;
     }
 
     div {
       width: 200px;
       height: 200px;
       background: skyblue;
       position: absolute;
       top: 0;
       left: 0;
       border-radius: 20px;
     }
   </style>
 </head>
 
 <body>
   <div>
   </div>
 </body>
 <script>
   const box = document.querySelector("div")
   let startX = 0, startY = 0;
   const moveTo = (e) => {
     let LagX = e.clientX - startX, LagY = e.clientY - startY;
     if(LagX<=0){
       LagX=0;
     }
     if(LagY<=0){
       LagY=0;
     }
     if(LagY>=window.innerHeight-box.clientHeight){
       LagY=window.innerHeight-box.clientHeight;
     }
     if(LagX>=window.innerWidth-box.clientWidth){
       LagX=window.innerWidth-box.clientWidth;
     }
     box.style.left = LagX + "px"
     box.style.top = LagY + "px"
   }
   box.addEventListener("mousedown", e => {
     startX = e.offsetX;
     startY = e.offsetY;
     document.addEventListener("mousemove", moveTo)
   })
   document.addEventListener("mouseup", e => {
     document.removeEventListener("mousemove", moveTo)
   })
 </script>
 
 </html>